// import xtxSkeleton from '@/components/library/xtx-skeleton'
// import xtxBread from '@/components/library/xtx-bread'
// import xtxCarousel from '@/components/library/xtx-carousel'
// import xtxMore from '@/components/library/xtx-more'
import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
// import Message from '@/utils/Message'
// 路径  是否加载子目录 ，匹配文件名

const importFn = require.context('./library', false, /\.vue$/)

export default {
  install (app) {
    // 自动引入注册
    importFn.keys().forEach(com => {
      const comm = importFn(com).default
      app.component(comm.name, comm)
    })
    // app.component('xtxSkeleton', xtxSkeleton)
    // app.component('xtxCarousel', xtxCarousel)
    // app.component('xtxMore', xtxMore)
    // app.component('xtxBread', xtxBread)
    defineDirective(app)
    // 在原型添加message
    // app.config.globalProperties.$message = Message
  }
}
// 原生的方法
// const defineDirective = (app) => {
//   // 图片懒加载指令
//   app.directive('lazy', {
//     mounted (el, binding) {
//       const observer = new IntersectionObserver(([{ isIntersecting }]) => {
//         console.log(isIntersecting)
//         if (isIntersecting) {
//           observer.unobserve(el)
//           // 图片加载失败时
//           el.onerror = () => {
//             el.src = defaultImg
//           }
//           el.src = binding.value
//         }
//       }, {
//         threshold: 0.01
//       })
//       // 停止侦测
//       observer.observe(el)
//     }
//   })
// }
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazy', {
    mounted (el, binding) {
      const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
        if (isIntersecting) {
          el.onerror = () => {
            el.src = defaultImg
          }
          el.src = binding.value
          stop()
        }
      })
    }
  })
}
